<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2024/3/23
  Time: 15:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户列表</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("li").mouseover(function(event){
                $("#d").show();
                <%--$.get("${pageContext.request.contextPath}/findById.product?id="+$(this).attr("data-id"),--%>
                <%--// 此处的函数参数result表示的是let result = xhr.responseText--%>
                <%--function(product){--%>
                    <%--// let product = eval("("+result+")");--%>
                    <%--console.log(product);--%>
                    <%--$("#s1").html(product.id);--%>
                    <%--$("#s2").html(product.name);--%>
                    <%--$("#s3").html(product.price);--%>
                    <%--// 设置div处于鼠标所在位置--%>
                    <%--$("#d").css("left",event.clientX);--%>
                    <%--$("#d").css("top",event.clientY);--%>
                <%--},"json");--%>

                <%--$.post("${pageContext.request.contextPath}/findById.product",--%>
                    <%--// 第二个参数本质上就是xhr.send()方法中的参数--%>
                    <%--// 如果参数过多,会导致可读性较差--%>
                    <%--// 此处支持以JSON格式展示--%>
                    <%--// "id="+$(this).attr("data-id"),--%>
                    <%--{"id":$(this).attr("data-id")},--%>
                    <%--// 此处的函数参数result表示的是let result = xhr.responseText--%>
                    <%--function(product){--%>
                        <%--// let product = eval("("+result+")");--%>
                        <%--console.log(product);--%>
                        <%--$("#s1").html(product.id);--%>
                        <%--$("#s2").html(product.name);--%>
                        <%--$("#s3").html(product.price);--%>
                        <%--// 设置div处于鼠标所在位置--%>
                        <%--$("#d").css("left",event.clientX);--%>
                        <%--$("#d").css("top",event.clientY);--%>
                    <%--},"json");--%>

                <%--$.getJSON("${pageContext.request.contextPath}/findById.product?id="+$(this).attr("data-id"),--%>
                    <%--// 此处的函数参数result表示的是let result = xhr.responseText--%>
                    <%--function(product){--%>
                        <%--// let product = eval("("+result+")");--%>
                        // console.log(product);
                        // $("#s1").html(product.id);
                        // $("#s2").html(product.name);
                        // $("#s3").html(product.price);
                        // // 设置div处于鼠标所在位置
                        // $("#d").css("left",event.clientX);
                        // $("#d").css("top",event.clientY);
                    <%--});--%>
                // $.ajax方法的参数是一个JSON格式的选项
                // 为了提高可读性,每一行展示一个选项即可
                $.ajax({
                    // 请求方式,默认是get
                    // type:"post",
                    // 请求地址
                    url:"${pageContext.request.contextPath}/findById.product",
                    <%--url:"${pageContext.request.contextPath}/findById.product?id="+$(this).attr("data-id"),--%>
                    // 请求参数,如果没有不写就行
                    data:{"id":$(this).attr("data-id")},
                    // 响应数据格式,默认是text表示普通字符串
                    dataType:"json",
                    success:function(product){
                        // 表示成功之后调用的回调函数
                        // 表示满足if(xhr.readyState == 4 && xhr.status == 200)
                        console.log(product);
                        $("#s1").html(product.id);
                        $("#s2").html(product.name);
                        $("#s3").html(product.price);
                        // 设置div处于鼠标所在位置
                        $("#d").css("left",event.clientX);
                        $("#d").css("top",event.clientY);
                    },
                    error:function(){
                        // 表示失败之后调用的回调函数
                        // 表示不满足上述条件,即出现了错误
                    }

                });

            });

            $("li").mouseout(function(){
                $("#d").hide();
            });
        })
    </script>
</head>
<body>
<!--
    需求一:查询所有商品信息
    此处使用传统web请求,不需要使用Ajax实现
    此处列表中的所有数据均为数据库中t_product表中的数据
    页面中只展现商品名称
-->
<ul>
    <c:forEach items="${products}" var="product">
        <li data-id="${product.id}">${product.name}</li>
    </c:forEach>
</ul>
<hr/>
<!--
    需求二:展现商品详情
    使用ajax实现该功能
    div默认是隐藏的,只有鼠标悬停在某个用户上的时候
    div出现在鼠标旁边,且div中显示鼠标悬停的用户的详情
    当鼠标离开用户选项的时候,div自动隐藏
-->
<div id="d" style="background-color: #dddddd;width: 200px;padding: 10px;display: none;position: absolute;">
    编号:<span id="s1">1</span><br/>
    商品名称:<span id="s2">aaa</span><br/>
    商品单价:<span id="s3">111</span><br/>
</div>
</body>
</html>